<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="门店选择">
        <el-select @change="storeChange" v-model="searchForm.shopId" placeholder="请选择">
          <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.shopId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">
          <i class="el-icon-plus"></i> 添加主题
        </el-button>
      </el-form-item>
    </el-form>
    <hr/>
    <el-table :data="tableData" stripe v-loading="loading">
      <el-table-column align="center" label="图片" width="100">
        <template slot-scope="scope">
          <img width="70px;" :src="scope.row.photoUrl"/>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="主题名称"></el-table-column>
      <el-table-column align="center" prop="type" label="主题类型"></el-table-column>
      <!-- <el-table-column prop="price" align="center" label="主题价格/元" width="120"></el-table-column> -->
      <!-- <el-table-column align="center" label="游戏人数/人" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.supportMinUserNum}}-{{scope.row.supportMaxUserNum}}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" label="场次模板">
        <template slot-scope="scope">
          <span v-text="scope.row.template || '-'"></span>
        </template>
      </el-table-column> -->
      <el-table-column label="主题等级" width="160">
        <template slot-scope="scope">
          <el-rate v-model="scope.row.level" disabled text-color="#ff9900"></el-rate>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="remarks" label="主题简介"></el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handlePrice(scope.row)" type="text" size="small">价格管理</el-button>
          <el-button v-if="scope.row.status" @click="handleShelves(scope.row)" type="text" size="small">上架</el-button>
          <el-button v-else @click="handleShelves(scope.row)" type="text" size="small">下架</el-button>
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="action" top="8vh" width="60%" :append-to-body="true" :visible.sync="dialogFormVisible">
      <edit-form ref="formItem" :formItem="form"></edit-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="submitForm" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="价格管理" top="8vh" width="60%" :append-to-body="true" :visible.sync="dialogPriceVisible">
      <price-form :priceItem="priceFormData"></price-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPriceVisible = false">关 闭</el-button>
        <!-- <el-button @click="dialogPriceVisible = false" type="primary">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import http from '@/services/xhr';
  import apiSetting from '@/services/api';
  import editForm from '@/pages/themes/edit';
  import priceForm from '@/pages/themes/price';

  export default {
    data() {
      return {
        storeList: [],
        tableData: [],
        loading: true,
        searchForm: {
          shopId: 2342342
        },
        action: '',
        dialogFormVisible: false,
        dialogPriceVisible: false,
        form: {},
        priceFormData: {}
      };
    },
    mounted() {
      http(apiSetting.getStores).then(res => {
        this.storeList = res.data.data.list;
        this.searchForm.shopId = this.storeList[0].shopId;
      }).then(() => {
        this.storeChange();
      });
    },
    components: {
      editForm,
      priceForm
    },
    methods: {
      storeChange() {
        let data = {
          topicQueryVo: {
            shopId: this.searchForm.shopId,
            platformId: ''
          }
        };
        http(apiSetting.getTopicList, data).then(res => {
          this.tableData = res.data.data.topicListVo;
          this.loading = false;
        });
      },
      add() {
        this.action = '添加';
        this.form = {
          level: 1
        };
        this.dialogFormVisible = true;
      },
      submitForm() {
        this.$refs.formItem.$refs.projectForm.validate(valid => {
          if (
            this.$refs.formItem.form.supportMinUserNum >
            this.$refs.formItem.form.supportMaxUserNum
          ) {
            this.$message({
              type: 'error',
              message: '游戏人数区间设置不正确！'
            });
            valid = false;
          }
          if (valid) {
            let data = {
              topicVo: JSON.parse(JSON.stringify(this.$refs.formItem.form))
            };
            if (this.action === '添加') {
              delete data.topicVo.id;
              http(apiSetting.addTopic, data).then(res => {
                data.topicVo.id = res.data.data.topicVo.id;
                this.tableData.push(data.topicVo);
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: this.action + '成功!'
                });
                this.dialogFormVisible = false;
              });
            } else {
              http(apiSetting.editTopic, data).then(res => {
                let len = '';
                this.tableData.forEach((element, index) => {
                  if (element.id === data.topicVo.id) {
                    len = index;
                  }
                });
                this.tableData.splice(len, 1, data.topicVo);
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: this.action + '成功!'
                });
                this.dialogFormVisible = false;
              });
            }
          } else {
            return false;
          }
        });
      },
      handlePrice(row) {
        this.priceFormData = JSON.parse(JSON.stringify(row));
        this.dialogPriceVisible = true;
      },
      handleEdit(row) {
        this.action = '编辑';
        this.form = JSON.parse(JSON.stringify(row));
        this.dialogFormVisible = true;
      },
      handleShelves(row) {
        this.$confirm('是否将此商品上架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '上架成功!'
          });
        }).catch(() => {});
      },
      handleDelete(row) {
        let data = {
          topicVo: {
            id: row.id
          }
        };
        this.$confirm('是否删除此商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          http(apiSetting.delTopic, data).then(res => {
            let len = '';
            this.tableData.forEach((element, index) => {
              if (element.id === row.id) {
                len = index;
              }
            });
            this.tableData.splice(len, 1);
          }).then(() => {
            this.$message({
              type: 'success',
              message: '已删除!'
            });
          });
        }).catch(() => {});
      }
    }
  };
</script>
